<template>
  <div class="page">
    <p class="welcome">Hello!</p>
    <p class="seeYou">Good to see you here ~</p>
    <img src="@/assets/images/registCat.png" class="Cat">
    <div class="loginBK">
      <div class="login_Content">
        <!-- 用户名 & 昵称行 -->
        <div class="form-row dual-inputs">
          <div class="input-group">
            <input v-model="formData.username" type="text" placeholder="用户名" class="form-input">
          </div>
          <div class="input-group">
            <input v-model="formData.nickname" type="text" placeholder="昵称" class="form-input">
          </div>
        </div>

        <!-- 单列输入项 -->
        <div class="form-row">
          <div class="input-group full-width">
            <input v-model="formData.email" type="email" placeholder="邮箱" class="form-input">
          </div>
        </div>

        <div class="form-row">
          <div class="input-group full-width">
            <input v-model="formData.password" type="password" placeholder="密码" class="form-input">
          </div>
        </div>

        <div class="form-row">
          <div class="input-group full-width">
            <input v-model="formData.repassword" type="password" placeholder="重新输入密码" class="form-input">
          </div>
        </div>

        <!-- 按钮组 -->
        <div class="button-group">
          <button class="signup-btn" @click="goSignUp">注册</button>
          <button class="signin-btn" @click="goSignin">已有账号？登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: 'RegisterIndex'
});
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { getUserRegist } from "./api/login";
const router = useRouter();

const formData = reactive({
  username: '',
  nickname: '',
  email: '',
  password: '',
  repassword: ''
});

// 用户名正则：4-16位字母、数字、下划线
const usernameRegex = /^[a-zA-Z0-9_]{5,16}$/;
// 密码正则：6-16位字母、数字、特殊字符
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;
// 邮箱正则：
const emailRegex = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/;

const validateForm = () => {
  if (!usernameRegex.test(formData.username)) {
    showToast('用户名必须是5-16位字母、数字或下划线');
    return false;
  }
  if (!passwordRegex.test(formData.password)) {
    showToast('密码必须是8-16位，包含大小写字母和数字');
    return false;
  }
  if (formData.password !== formData.repassword) {
    showToast('两次输入的密码不一致');
    return false;
  }
  if (!emailRegex.test(formData.email)) {
    showToast('请输入有效的邮箱地址');
    return false;
  }
  return true;
};

const goSignin = () => {
  router.push('/login');
};

const goSignUp = async () => {
  if (!validateForm()) return;

    // 调用注册接口
    getUserRegist({
      username: formData.username,
      nickname: formData.nickname,
      email: formData.email,
      password: formData.password,
      repassword: formData.repassword
    }).then((res) => {
      if (res.data.code === 200) {
        showToast('注册成功');
        router.push('/login');
      }else{
        showToast('注册失败，请重试');
      }
    })
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #8D9F5E;
  height: 100vh;
  position: relative;

  .welcome {
    font-size: 1.9rem;
    color: #fff;
    position: absolute;
    top: 48px;
    left: 31px;
    margin: 0;
  }

  .seeYou {
    font-size: 1rem;
    color: #fff;
    position: absolute;
    top: 88px;
    left: 31px;
    margin: 0;
  }

  .Cat {
    position: absolute;
    right: 20px;
    top: 68px;
    width: 130px;
    height: 146px;
  }

  .loginBK {
    position: absolute;
    top: 195px;
    background: #683931;
    width: 100%;
    height: 20px;
    border-radius: 40px 40px 0 0;
  }

  .login_Content {
    position: relative;
    background: white;
    margin: 3px 0 0 0;
    padding: 30px 0;
    border-radius: 25px 25px 0 0;
    min-height: calc(100vh - 198px);

    .title {
      color: #8D9F5E;
      font-size: 1.25rem;
      text-align: center;
      margin-bottom: 2rem;
    }

    .form-row {
      margin-bottom: 1.5rem;

      &.dual-inputs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
      }
    }

    .input-group {
      position: relative;

      &.full-width {
        grid-column: span 2;
      }

      .form-input {
        width: 100%;
        height: 48px;
        padding: 0 15px;
        border: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.38);
        font-size: 0.9rem;
        transition: border-color 0.3s;

        &:focus {
          border-bottom: 2px solid #8D9F5E;
          outline: none;
        }

        &::placeholder {
          color: #999;
          opacity: 0.8;
        }
      }
    }

    .button-group {
      margin-top: 2rem;

      .signup-btn {
        width: 100%;
        height: 48px;
        background: #8D9F5E;
        color: white;
        border: none;
        border-radius: 24px;
        font-size: 1rem;
        margin-bottom: 1rem;
        cursor: pointer;
      }

      .signin-btn {
        width: 100%;
        background: transparent;
        color: #8D9F5E;
        border: 1px solid #8D9F5E;
        height: 48px;
        border-radius: 24px;
        font-size: 1rem;
        cursor: pointer;
      }
    }
  }
}
</style>